<template>
	<div class="changeinfo">
		<van-nav-bar title="我的账号" left-arrow @click-left="onClickLeft" />
		<div v-model="loginUser">

			<van-cell clickable is-link center title="头像" @click="showpic=true">
				<van-image round fit="cover" width="3rem" height="3rem" :src="`http://localhost:8080/res/${head_img}`" />
			</van-cell>
			<van-cell clickable is-link title="用户名" @click="shownick=true">{{loginUser.user_name}}</van-cell>
			<van-cell clickable is-link title="真实姓名" @click="showtruename=true">{{loginUser.user_true_name}}</van-cell>
			<van-cell class="userpassword" clickable is-link title="账号密码" @click="showpwd=true">
				<template #default>
					<van-field v-model="loginUser.user_password" type="password" style="padding: 0"/>
				</template>
				</van-cell>
			<van-cell clickable is-link title="手机号" @click="showtel=true" >{{loginUser.telephone}}</van-cell>
			<van-cell clickable is-link title="退出登录" @click="logout"></van-cell>

		</div>
		<!--修改头像-->
		<van-overlay :show="showpic">
			<div class="wrapper">
				<div class="block">
					<van-form @submit="changepicsub">
						
						<van-uploader class="uploadfile" 
							:after-read="afterRead" 
							v-model="fileList"
							:max-count="1" multiple >
						 <template #preview-cover="{ file }">
						    <div class="preview-cover van-ellipsis">{{ 1111}}</div>
						  </template>
						</van-uploader>
						  
						<div>
							<van-button style="margin: 30px 60px;" plain hairline size="small" native-type="button" @click="showpic=false">
								返回
							</van-button>
							<van-button plain hairline size="small">提交</van-button>
						</div>
					</van-form>
				</div>
			</div>
		</van-overlay>
		<!--修改昵称-->
		<van-overlay :show="shownick">
			<div class="wrapper">
				<div class="block">
					<van-form @submit="changenicksub">
						<van-field v-model="loginUser.user_name" name="用户名" label="用户名" placeholder="用户名" :rules="[{ pattern, message: '仅限英文字母,汉字,数字与下划线,2-20个字符' }]" />
						<div>
							<van-button style="margin: 30px 60px;" plain hairline size="small" native-type="button" @click="shownick=false">
								返回
							</van-button>
							<van-button plain hairline size="small">提交</van-button>
						</div>
					</van-form>
				</div>
			</div>
		</van-overlay>
		<!--修改真实姓名-->
		<van-overlay :show="showtruename">
			<div class="wrapper">
				<div class="block">
					<van-form @submit="changetruenamesub">
						<van-field v-model="loginUser.user_true_name" name="真实用户名" label="真实用户名" placeholder="真实用户名"  />
						<div>
							<van-button style="margin: 30px 60px;" plain hairline size="small" native-type="button" @click="showtruename=false">
								返回
							</van-button>
							<van-button plain hairline size="small">提交</van-button>
						</div>
					</van-form>
				</div>
			</div>
		</van-overlay>
		<!--修改密码-->
		<van-overlay :show="showpwd">
			<div class="wrapper">
				<div class="block">
					<van-form @submit="changepwdsub">
						<van-field
							v-model="oldpassword"
							type="password"
						    name="旧密码"
						    label="旧密码"
						    placeholder="旧密码"
						    :rules="[{ required: true, message: '请填写旧密码' }]"
						  />
						  <van-field
							v-model="newpassword"
						    type="password"
						    name="新密码"
						    label="新密码"
						    placeholder="新密码"
						    :rules="[{ required: true, message: '请填写新密码' }]"
						  />
						<div>
							<van-button style="margin: 30px 60px;" plain hairline size="small" native-type="button" @click="showpwd=false">
								返回
							</van-button>
							<van-button plain hairline size="small">提交</van-button>
						</div>
					</van-form>
				</div>
			</div>
		</van-overlay>
		
		<!--修改手机号-->
		<van-overlay :show="showtel">
			<div class="wrapper">
				<div class="block">
					<van-form @submit="changenicksub">
						<div>
							<van-field v-model="loginUser.telephone" name="电话" label="电话" placeholder="电话" :rules="[{required:true, message: '' }]" />
							<van-button style="margin: 30px 60px;" plain hairline size="small" native-type="button" @click="showtel=false">
								返回
							</van-button>
							<van-button plain hairline size="small">提交</van-button>
						</div>
					</van-form>
				</div>
			</div>
		</van-overlay>

	</div>
</template>

<script>
	import {
		Toast
	} from 'vant';
	import Vue from 'vue'
	import ChangeInfoService from './ChangeInfoService.js'
	export default {
		name: 'ChangeInfo',
		data() {
			return {
				showpic:false,//显示头像上传
				shownick: false, //昵称表单显示
				showpwd: false, //修改密码
				showtel:false,//手机号
				showtruename:false,//用户真实姓名
				pattern: /^[\u4E00-\u9FA5\uF900-\uFA2D|\w]{2,20}$/,
				loginUser:'',
				oldpassword:'',//旧密码
				newpassword:'',//新密码
				fileList: [],
				head_img:'default.jpg',//头像

			};
		},
		created() {
			Vue.axios.get(`http://localhost:8080/user/getlogin`).then(res => {
				this.loginUser = res.data.loginUser;
				console.log(this.loginUser);
				if(!this.loginUser){
					Toast('对不起,请先登录!');
					this.$router.push({
						name: 'Login'
					});
				}else{
					this.head_img=this.loginUser.head_img;
					console.log("用户已登录")
				}
			});
		},
		methods: {
			onClickLeft() {
				this.$router.replace('/personal');
			},
			afterRead(file) {
			      // 此时可以自行将文件上传至服务器
			      //console.log(file);
			    },
			//提交头像
			changepicsub(){
				console.log(111);
				console.log(this.fileList);
				let formData = new FormData();
				//let filel='';
				this.fileList.forEach( file=>{
					//console.log(file.file)
					formData.append('mpfs', file.file, file.file.name);
				})
				ChangeInfoService.uploadService(formData, r => {
						this.head_img=r.picName;
						this.loginUser.head_img=r.picName;
						let changelogin=this.loginUser
						ChangeInfoService.editUserService(changelogin, r => {
						    if (r) {
								Toast.success('更改成功');
							} else {
								Toast.success('更改失败');
							}
						  });
				});

				this.showpic=false;
			},
			//昵称提交
			changenicksub() {
				ChangeInfoService.editUserService(this.loginUser, r => {
				    if (r) {
						Toast.success('更改成功');
					} else {
						Toast.success('更改失败');
					}
				  });
				this.shownick = false;
				this.showtel = false;
			},
			//真实姓名提交
			changetruenamesub(){
				ChangeInfoService.editUserService(this.loginUser, r => {
					if (r) {
						Toast.success('更改成功');
					} else {
						Toast.success('更改失败');
					}
				});
				this.showtruename = false;
			},
			//密码提交
			changepwdsub() {
				if(this.oldpassword==this.loginUser.user_password){
					if(this.oldpassword!=this.newpassword){
						this.loginUser.user_password=this.newpassword;
						ChangeInfoService.editUserService(this.loginUser, r => {
						    if (r) {Toast.success('更改成功');} 
							else {Toast.success('更改失败');}
						  });
					}else{
						Toast.fail('新旧密码不能相同');
					}
				}else{
					Toast.fail('旧密码输入错误');
				}
				
				this.showpwd = false;
			},
			
			//退出登录
			logout(){
				this.axios.get(this.GLOBAL.logout).then(res=>{
					this.$notify({type:"success",message:res.data.msg});
					this.$store.commit('changeLogin',false);
					this.$router.push({
						name:'Login',
					});
				});
			},

		},
	}
</script>

<style lang="less">
	.wrapper {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;

	}

	.block {
		width: 20em;
		height: 20em;
		background-color: #fff;
		
	}
	.preview-cover {
	    position: absolute;
	    box-sizing: border-box;
	    bottom: 0;
	    width: 100%;
	    padding: 4px;
	    color: #fff;
	    font-size: 12px;
	    text-align: center;
	    background: rgba(0, 0, 0, 0.3);
	  }
	  .uploadfile{
		  height: 80px;
		  margin: 30px 50px ;
	  }
	.changeinfo{
		.userpassword{
			.van-field__control{
				text-align: right;
			}
		}
	}
</style>
